<template>
	<view class="comp-scroll-tab" :style="wrapStyle">
		<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" :enable-flex="true">
			<view v-for="(item, index) in showList" :key="index" class="scroll-view-item_H"
				:class="{active:currentRef===index}" @tap="onTapItem(item, index)"
				:style="{...itemStyle, ...(currentRef===index ? activeItemStyle: {})}">
				<view class="item-name">{{item.name}}</view>
				<view v-if="currentRef===index" class="indicator"></view>

			</view>
		</scroll-view>
		<slot name="right"></slot>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits,
		computed,
		reactive,
	} from "vue";

	const props = defineProps({
		wrapStyle: {
			type: Object,
			default: () => ({
				padding: 0,
			}),
		},
		itemStyle: {
			type: Object,
			default: () => ({
				height: '66rpx',
				fontSize: '32rpx',
				padding: '0 32rpx',
			}),
		},
		activeItemStyle: {
			type: Object,
			default: () => ({
				fontSize: '32rpx',
			}),
		},
		current: {
			type: Number,
			default: 0
		},
		list: {
			type: Array,
			default: () => ([]),
		},

	});

	const emit = defineEmits(['change'])

	const currentRef = ref(props.current);


	const showList = computed(() => {
		return props.list.map((item) => {
			return {
				...item,
				// imageName: item.imageUrl.replace('.svg', '') + '.png',
				// imageNameActive: item.imageUrl.replace('.svg', '') + '-active.png',
			}
		})
	})

	const onTapItem = (item, index) => {
		currentRef.value = index;
		emit('change', index)
	}
</script>

<style lang="less" scoped>
	.comp-scroll-tab {
		box-sizing: border-box;
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			// display: flex;
			// justify-content: center;
			text-align: center;
		}

		.scroll-view-item_H {
			display: inline-flex;
			color: rgba(56, 56, 56, 1);
			letter-spacing: 0;
			// text-align: center;
			line-height: 48rpx;
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			
			position: relative;

			&.active {
				font-weight: bold;
				color: rgba(69, 145, 230, 1);
			}
			.indicator {
				width: 56rpx;
				height: 8rpx;
				background: rgba(69, 145, 230, 1);
				border-radius: 4rpx;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
</style>